import { Card, Space, Tag, Typography, Button } from 'antd'
import { useMemo, useState } from 'react'
import { useSelector } from 'react-redux'

import { NVRAMTest, DDRTest } from '@/api/common.api'
interface Props {
  computerId: number
  cpuId: number
  cpuName: string
  className?: string
  link: object
}

const DEFAULT_STATE = [
  { label: 'CPU 占用率', key: 'cpu', suffix: '%' },
  { label: '内存占用率', key: 'memory', suffix: '%' },
  // { label: 'FPGA 访问', key: 'fpga' },
  // { label: 'NVRAM 读写', key: 'nvram' },
  // { label: '板间同步', key: 'sync' }
]


export default function SelfCheckBoard({ computerId, cpuName, cpuId, className, link }: Props) {
  const computerState = useSelector(
    (state) => {
      const computer = state.devices.computers.find((comp) => comp.id === computerId)
      return computer.cpuList.find(item => item.id === cpuId)
    }
  )


  const stateList = useMemo(() => {
    return DEFAULT_STATE.map((item) => {
      return {
        ...item,
        value: computerState[item.key]
      }

    })
  }, [computerState])





  // 判断值是否正常
  function isNormal(key: string, value: any) {
    if (value === undefined || value === null) return false

    if (key === 'cpu' || key === 'memory') {
      return value <= 50
    }

    if (key === 'fpga' || key === 'sync') {
      return value === 0
    }
    if (key === 'nvram') {
      return value === 1
    }

    return false
  }

  // 格式化自检结果
  const formatValue = (key: string, value: any) => {
    if (value === undefined || value === null) return '异常'

    if (key === 'fpga' || key === 'sync') {
      return value === 0 ? '正常' : '异常'
    }
    if (key === 'nvram') {
      return value === 1 ? '正常' : '异常'
    }

    return value
  }


  const [NVRAMResult, setNVRAMTest] = useState()

  const NVRAMTestAction = () => {
    NVRAMTest({
      computerId: computerId,
      cpuId: cpuId,
      cmd: 0x00,
      link,
    }).then(setNVRAMTest)
  }
  const [DDRResult, setDDRTest] = useState()
  const DDRTestAction = () => {
    DDRTest({
      computerId: computerId,
      cpuId: cpuId,
      cmd: 0x01,
      link,
    }).then(setDDRTest)
  }


  return (
    <Card className={`${className}`}>

      <div className="flex items-center justify-between gap-4">
        <div className='mb-1 text-lg font-bold'>CPU: {cpuName}</div>
        <div className="flex items-center  gap-4">
          {stateList.map(({ label, key, value, suffix }) => (
            <Space key={key}>
              <Typography.Text>{label}</Typography.Text>
              <Tag color={isNormal(key, value) ? 'green' : 'red'}>
                {value === 0 ? '正常' : '异常'}
              </Tag>
            </Space>
          ))}
        </div>

        {/* <Button type="primary" size="small" className="w-full" onClick={NVRAMTestAction}>
          NVRAMTest
        </Button>

        <Button type="primary" size="small" className="w-full" onClick={DDRTestAction}>
          DDRTest
        </Button> */}
      </div>

      <div className="flex items-center gap-4 my-2">
        <div>
          <Button type="primary" size="small" className="w-full" onClick={NVRAMTestAction}>
            NVRAM测试
          </Button>
        </div>

        {
          NVRAMResult ? <div className='flex-1 flex items-center gap-2'>
            <div>
              <Tag color={NVRAMResult?.state === 0 ? 'green' : 'red'}>
                {NVRAMResult?.state === 0 ? '正常' : '异常'}
              </Tag>
            </div>
            <div className='flex-1'>起始区域地址: {NVRAMResult?.startArea}</div>
            <div className='flex-1'>中间区域地址: {NVRAMResult?.middleArea}</div>
            <div className='flex-1'>结尾区域地址:{NVRAMResult?.endArea}</div>
            <div className='flex-1'>数据大小: {NVRAMResult?.size}</div>
          </div> : ''
        }
      </div>
      <div className="flex items-center gap-4 my-2">
        <div>  <Button type="primary" size="small" className="w-full" onClick={DDRTestAction}>
          DDR测试
        </Button></div>
        {

          DDRResult ? <div className='flex-1 flex items-center gap-2'>
            <div>
              <Tag color={DDRResult?.state === 0 ? 'green' : 'red'}>
                {DDRResult?.state === 0 ? '正常' : '异常'}
              </Tag>
            </div>
            <div className='flex-1'>数据大小: {DDRResult?.size}</div>
          </div> : ''
        }
      </div>
    </Card>
  )
}
